<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <title>智能售卡系统</title>
    <link rel="stylesheet" href="../../..//public/layui/css/layui.css">
    <script src="../../..//public/layui/layui.js"></script>
    <script src="../../..//public/jquery/jquery.min.js"></script>
    <style>
        .fixed-top {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            line-height: 50px;
            z-index: 1000; /* 确保导航栏在页面其他内容的上方 */
            background-color: #fff; /* 根据需要设置背景颜色 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加一个简单的阴影效果 */
        }
        .nav-right {
            display: flex;
            align-items: center;
            list-style: none; /* Remove bullet points */
            margin: 0;
            padding-right: 5px;
            line-height: 40px;
            justify-content: right;
        }
    </style>
</head>
<body>
<div class="layui-row fixed-top">
    <div class="layui-col-xs8 layui-col-sm10 layui-col-md10">
        <a href=""><img src="https://www.bootcss.com/assets/img/navlogo-small.png" style="margin-right: 5px"/>智能售卡系统</a>
        <a href="/index" style="margin-left: 5px">首页</a>
        <a href="/about" style="margin-left: 5px">关于</a>
        <a href="/help" style="margin-left: 5px">手册</a>
    </div>
    <div class="layui-col-xs4 layui-col-sm2 layui-col-md2 nav-right">
        <li class="layui-nav-item" id="login-item" style="margin-right: 4px"><a href="/login" id="login">登录</a></li>
        <li class="layui-nav-item" id="logout-item"><a href="javascript:void(0);" id="logout">退出</a></li>
    </div>
</div>
<div style="margin-left: 50px;margin-right: 50px;margin-top: 50px">
    <blockquote class="layui-elem-quote">
        about <?=htmlspecialchars($name)?>
    </blockquote>
</div>
<script>
    layui.$(document).ready(function() {
        let username = localStorage.getItem('username');
        let loginItem = layui.$('#login-item');
        let logoutItem = layui.$('#logout-item');
        let loginButton = layui.$('#login');
        let logoutButton = layui.$('#logout');

        if (username) {
            // 用户已登录，显示用户名，隐藏登录按钮，显示退出按钮
            loginButton.text(username);
            loginButton.attr('href', 'javascript:void(0);'); // 禁止跳转登录页面
            logoutItem.show();
            loginItem.show();
        } else {
            // 用户未登录，显示登录按钮，隐藏退出按钮
            loginItem.show();
            logoutItem.hide();
        }

        layui.$('#logout').on('click', function() {
            //console.log('点击退出按钮');
            layui.$.ajax({
                url:'/app/admin/user/logout',
                type: "POST",
                data: {user_id:localStorage.getItem('user_id')},
                success:function (res) {
                    layer.msg('退出成功')
                    localStorage.removeItem('username');
                    localStorage.removeItem('token');
                    localStorage.removeItem('user_id');
                    setTimeout(function () {
                        location.reload(); // 刷新页面以更新按钮显示
                    },1500)
                },error:function (res){

                }
            })

        });
    });
</script>
</body>
</html>
